import React from 'react';
import { Card, Button } from 'antd';
import cn from 'classnames';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// import { EmployeeSelect } from '@/components';
import BasicRule from './BasicRule';
import ExtendRule from '../ExtendRule/ExtendRule';
import styles from './BusinessRule.less';

const BusinessRule = () => {
    const [tab, setTab] = React.useState('tab1');
    const baseRef = React.useRef(null);

    const tabList = [
        {
            key: 'tab1',
            tab: '基础规则'
        },
        {
            key: 'tab2',
            tab: '扩展规则'
        }
    ];

    const handleTabChange = key => {
        setTab(key);
    };

    const handleSave = () => {
        if (tab === 'tab1') {
            baseRef.current.save();
        } else {
            baseRef.current.handleExpandSave();
        }
    };

    const extraButtons = (
        <Button type="primary" className={styles.extraButton} onClick={handleSave}>
            保存
        </Button>
    );

    return (
        <PageHeaderWrapper>
            <Card bordered={false} tabList={tabList} tabBarExtraContent={extraButtons} onTabChange={handleTabChange}>
                <div className={cn({ [styles.tabHide]: tab !== 'tab1' })}>
                    {/* <EmployeeSelect /> */}
                    <BasicRule wrappedComponentRef={baseRef} />
                </div>
                <div className={cn({ [styles.tabHide]: tab !== 'tab2' })}>
                    <ExtendRule wrappedComponentRef={baseRef} tab={tab} />
                </div>
            </Card>
        </PageHeaderWrapper>
    );
};

export default BusinessRule;
